<template>
  <div class="gggl-content">
    <!-- 数据资产概览 -->
    <div class="sjzcgl-content">
      <div class="time-select">
        <!-- <span
          class="btn"
          :class="{ active: currentTime == 7 }"
          @click="selectTime(7)"
          >近7天</span
        >
        <span
          class="btn hasborder"
          :class="{ active: currentTime == 30 }"
          @click="selectTime(30)"
          >近30天</span
        >
        <span
          class="btn"
          :class="{ active: currentTime == 'year' }"
          @click="selectTime('year')"
          >近1年</span
        > -->
        <span
          class="btn"
          :class="{ active: currentTime == 1 }"
          @click="selectTime(1)"
          >近24小时</span
        >
        <span
          class="btn"
          :class="{ active: currentTime == 7 }"
          @click="selectTime(7)"
          >近7天</span
        >
        <span
          class="btn hasborder"
          :class="{ active: currentTime == 30 }"
          @click="selectTime(30)"
          >近30天</span
        >
      </div>
    </div>
    <div class="box-flex">
      <div class="left-box">
        <sjzl :allData="allData"></sjzl>
        <sjlxfx :allData="allData"></sjlxfx>
        <sjqsfx :allData="allData"></sjqsfx>
      </div>
    </div>
    <div class="bottom-box">
      <dbqd style="height: 665px"></dbqd>
      <xcdb style="height: 665px"></xcdb>
      <fwss></fwss>
    </div>
  </div>
</template>
<script setup>
import { ScaleMin } from "@/utils/screen-scale-mixin.js";
const { scaleStyle } = ScaleMin();
import LabelTitle from "@/components/labeltitle.vue";
import { onMounted } from "vue";
import sjzl from "./component/gggl-zhsj.vue";
import sjzldy from "./component/sjzldy.vue";
import sjlxfx from "./component/sjlxfx.vue";
import sjqsfx from "./component/sjqsfx.vue";
import zxsj from "./component/zxsj.vue";
import dbqd from "./component/dbqd.vue";
import cygj from "./component/cygj.vue";
import xcdb from "./component/xcdb.vue";
import fwss from "./component/gggl-fwss.vue";
import { useUserStore } from "@/pinia/user.js";
import { getDataTotalList } from "@/api/event";
const piniaUser = useUserStore();
const UserId = localStorage.getItem("User");
// 需要根据权限判断是否显示
//领导是数组list 科员队员的数组list
const leaderList = [
  "1903999283762434048",
  "1903999283762434049",
  "1903999283766628353",
  "1903999283766628355",
];

let currentTime = ref(7);
const selectTime = (time) => {
  currentTime.value = time;
  getData();
};

let allData = ref({});
const getData = async () => {
  try {
    if (leaderList.indexOf(UserId) > -1) {
      let { data } = await getDataTotalList({
        dateRange: currentTime.value, //1,7,30
      });
      allData.value = data;
    } else {
      let { data } = await getDataTotalList({
        dateRange: currentTime.value, //1,7,30
      });
      allData.value = data;
    }
  } catch (e) {
    console.error(e);
  }
};

onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.time-select {
  position: absolute;
  right: 0;
  top: 0px;
  width: 210px;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .btn {
    background: #fff;
    display: inline-block;
    width: 70px;
    height: 28px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #2263bf;
    line-height: 28px;
    letter-spacing: 1px;
    text-align: center;
    cursor: pointer;
    &.active {
      background: #2263bf;
      color: #ffffff;
    }
    &.hasborder {
      border-left: 1px solid rgba(151, 151, 151, 0.21);
      border-right: 1px solid rgba(151, 151, 151, 0.21);
    }
  }
}
.gggl-content {
  width: 100%;
  height: 100%;
  position: relative;
  border: 1px solid transparent;
  .sjzcgl-content {
    width: 100%;
    position: absolute;
    right: 0px;
    top: -10px;
  }
  .box-flex {
    margin-top: 20px;
    width: 100%;
    // height: calc(100% - 60px);
    // display: flex;
    // align-items: top;
    .left-box {
      width: 100%;
      display: flex;
      align-items: top;
      // flex-wrap: wrap;
    }
    // .right-box {
    //   width: 308px;
    //   height: 100%;
    //   margin-left: 20px;
    // }
  }
  .bottom-box {
    min-height: calc(100% - 320px);
    display: flex;
    align-items: top;
    margin-bottom: 20px;
  }
}
</style>
